useLayoutEffect

🧑🏻‍💻 useLayoutEffect

---

✅ useLayoutEffect 문법

useLayoutEffect(setup, dependencies?)

• useLayoutEffect 는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다.

🧑🏻‍💻 알고 가기

---

✅ 주의 사항

• useLayoutEffect 내부에 예약된 state가 업데이트 되면 리 렌더링을 우선 차단한 후 useLayoutEffect 내부 로직 동작이 완료되고 나서야 리 렌더링이 동작한다. 이 때문에 과도하게 사용하면 웹이 느려지니, 가급적이면 useEffect를 사용해야 한다.

✅ 언제 사용하는지

• 브라우저에서 화면을 다시 그리기 전 레이아웃 측정이 필요할 때

import { useRef, useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import TooltipContainer from './TooltipContainer.js';

export default function Tooltip({ children, targetRect }) {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
    console.log('Measured tooltip height: ' + height);
  }, []);

  let tooltipX = 0;
  let tooltipY = 0;
  if (targetRect !== null) {
    tooltipX = targetRect.left;
    tooltipY = targetRect.top - tooltipHeight;
    if (tooltipY < 0) {
      // It doesn't fit above, so place below.
      tooltipY = targetRect.bottom;
    }
  }

  return createPortal(
    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
      {children}
    </TooltipContainer>,
    document.body
  );
}